import { useEffect, useState } from 'react';
import { Link } from 'react-router-dom';
import { ArrowRight } from 'lucide-react';
export function Hero() {
  const [currentSlide, setCurrentSlide] = useState(0);
  const slides = [{
    image: 'https://images.unsplash.com/photo-1515377905703-c4788e51af15?ixlib=rb-4.0.3&auto=format&fit=crop&w=1950&q=80',
    title: 'Daily Ritual for Inner & Outer Glow',
    subtitle: 'Discover the perfect balance of skincare and self-care'
  }, {
    image: 'https://images.unsplash.com/photo-1556228720-195a672e8a03?ixlib=rb-4.0.3&auto=format&fit=crop&w=1950&q=80',
    title: 'Embrace Your Ritual',
    subtitle: 'Carefully curated products for your wellness journey'
  }];
  useEffect(() => {
    const interval = setInterval(() => {
      setCurrentSlide(prev => prev === slides.length - 1 ? 0 : prev + 1);
    }, 6000);
    return () => clearInterval(interval);
  }, [slides.length]);
  return <section className="relative w-full h-[80vh] overflow-hidden">
      {slides.map((slide, index) => <div key={index} className={`absolute inset-0 transition-opacity duration-1000 ease-in-out ${index === currentSlide ? 'opacity-100' : 'opacity-0'}`}>
          <div className="absolute inset-0 bg-cover bg-center" style={{
        backgroundImage: `url(${slide.image})`
      }}>
            <div className="absolute inset-0 bg-black bg-opacity-20"></div>
          </div>
          <div className="relative h-full flex flex-col justify-center items-center text-center px-4 md:px-8 lg:px-12">
            <div className="flex flex-col items-center justify-center min-h-[280px]">
              <h2 className="font-serif text-2xl md:text-4xl lg:text-5xl text-white mb-6 max-w-5xl mx-auto leading-tight truncate">
                {slide.title}
              </h2>
              <p className="text-white text-lg md:text-xl mb-8 max-w-2xl mx-auto h-[60px] flex items-center justify-center">
                {slide.subtitle}
              </p>
              <Link to="/skincare" className="bg-[#4a6b60] hover:bg-[#3d5a50] text-white px-6 py-3 rounded-md flex items-center transition-colors">
                Discover Our Collection
                <ArrowRight size={16} className="ml-2" />
              </Link>
            </div>
          </div>
        </div>)}
      <div className="absolute bottom-6 left-0 right-0 flex justify-center space-x-2">
        {slides.map((_, index) => <button key={index} onClick={() => setCurrentSlide(index)} className={`w-2 h-2 rounded-full ${index === currentSlide ? 'bg-white' : 'bg-white bg-opacity-50'}`} aria-label={`Go to slide ${index + 1}`} />)}
      </div>
    </section>;
}